<template>
  <div class="departments">
    <el-card class="mycard">
      <!-- tabs结构 -->
      <el-tabs>
        <el-tab-pane label="组织结构"></el-tab-pane>
      </el-tabs>
      <!-- 结构架构 -->
      <div class="box">
        <!-- 结构头部 -->
        <treetools :istop="true" :item="topitem"     @changeAddshow="openAdd"></treetools>
        <hr />
        <el-tree :data="list" default-expand-all>
          <treetools
           @refresData="getDepartment" 
           @changeAddshow="openAdd"
           @changeEditShow='openEdit'
           slot-scope="{ data }" 
           :item="data"></treetools>
        </el-tree>
      </div>
    </el-card>
    <!-- <addpart 
    :addshow="addshow" 
    :currentObj="currentObj"
    @closepanel="val=>(addshow=val)"
    @updateList="getDepartment"
    ></addpart> -->
      <addpart 
      ref="addpanle"
    :addshow.sync="addshow" 
    :currentObj="currentObj"
    @updateList="getDepartment"
    ></addpart>
  </div>
</template>

<script>
//导入 组织架构的接口
import { getDepartmentApi } from "@/api/departments.js";
//导入面板
export default {
  data() {
    return {
      //设置给头部的数据源
      topitem: {
        label: "传智教育"
      },
      //组织架构的数据源
      list: [],
      // 控制新增面板到显示与隐藏
      addshow: false,
      //当前操作的部门对象
      currentObj: {}
    };
  },
  methods: {
    //打开编辑面板
    openEdit(item) {
      this.addshow = true;
      //保存当前操作的部门对象
      this.currentObj = item;
      //调用子组件中的方法,来根据id 得到部门信息
      this.$refs.addpanle.getItem(item.id);
    },
    //打开新增面板
    openAdd(item) {
      this.addshow = true;
      //保存当前操作的部门对象
      this.currentObj = item;
    },
    //获取组织架构数据
    async getDepartment() {
      //发送网络请求
      const res = await getDepartmentApi();
      // console.log(res)
      //保存数据源
      this.list = this.trunData(res.data.depts, "");
      // 保存顶部数据
      this.topitem = { ...res.data.depts[0], manager: "负责人" };
    },
    //定义一个转换数据的方法
    trunData(arr, pid) {
      //定义一个数组
      var newarr = [];
      arr.forEach(item => {
        if (item.pid === pid) {
          var children = this.trunData(arr, item.id);
          if (children.length > 0) {
            item.children = children;
          }
          newarr.push(item);
        }
      });
      //返回数组
      return newarr;
    }
  },
  components: {
    treetools: () => import("./components/tree-tools.vue"),
    addpart: () => import("./components/addpart.vue")
  },
  created() {
    //获取组织架构数据
    this.getDepartment();
  }
};
</script>

<style lang="scss" scoped>
.departments {
  margin: 20px;
  .mycard {
    padding: 20px;
  }
  .box {
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
  }
}
</style>
